<template>
  <div  class="login-container">
     <van-nav-bar title="登录"  class="page-nav-bar">
       <van-icon slot="left" name="cross" @click="$router.back()"/>
     </van-nav-bar>
     <van-form ref="loginForm" @submit="onSubmit">
        <van-field
          maxlength="11"
          type="number"
          v-model="user.mobile"
          name="mobile"
          placeholder="请输入手机号"
          :rules="formRules.mobile"
        >
         <i slot="left-icon" class="iconfont icon-shouji"></i>
        </van-field>
        <van-field
          v-model="user.code"
          type="number"
          name="code"
          placeholder="请输入验证码"
          maxlength="6"
          :rules='formRules.code'
        >
         <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
          <template #button>
            <van-count-down class="send-btn" :time="time" format="ss 秒" v-if="showSend" @finish="showSend=false"/>
            <van-button class="send-btn" native-type="button"  size="small" type="default" @click="send" v-else>发送验证码</van-button>
          </template>
        </van-field>
        <div class="login-btn-warp">
          <van-button class="login-btn" block type="info" native-type="submit">登录</van-button>
        </div>
       
      </van-form>
  </div>
</template>

<script >
import {loginAPI,sendVerifyAPI} from '@/api'
export default {
  name:'Login',
  data() {
    return {
     user:{
       mobile:'17090086870',
       code:'246810'
     },
     formRules:{
       mobile:[{
          required: true, message: '手机不能为空' },{
          pattern:/^1[3|5|7|8]\d{9}$/,message:'手机号格式错误'
          }],
       code:[{ 
          required: true, message: '验证码不能为空' },{
          pattern: /^\d{6}$/,message:'验证码格式错误'
         }]
     },
     time:(1000*20),
     showSend:false
    };
  },
  methods: {
    //用户登录
   async onSubmit() {
      const user=this.user;
      this.$toast.loading({
          message: '加载中...',
          forbidClick: true,//静止点击背景
          duration:2000//持续时间 默认2000
        });
      try{
        // 发起登录请求
        const {data}=await loginAPI(user);
        this.$store.commit('setUser',data.data)
        this.$toast.success('成功登录');
        //登录成功 返回原来的页面
        this.$router.back();
      }catch(err){
        if(err.response.status===400){
          // 手机号或者正码错误
          this.$toast.fail('手机号或者正码错误');
        }else{
          // 其他错误
          this.$toast.fail('未知错误,请稍后重试!');
        }
      }
    },
    //发送验证码
    async send(){
      try{
        //验证手机
         await sendVerifyAPI(this.user.mobile)
      }catch(err){
        return this.$toast('发送失败')
      }
      this.showSend=true;//手机验证成功显示倒计时
      try{
        //请求验证码
       await this.$refs.loginForm.validate('mobile')
       this.$toast('验证码已发送');

      }catch(err){
        this.showSend=false;//验证码发脓失败关闭倒计时
        if(err.response.status===429){
          console.log(11);
          this.$toast('发送太频繁,请稍后再试!')
        }else{
          this.$toast('发送失败,请稍后再试!')
        }
       
      }
    }
  },
}
</script>

<style scoped lang="less">
  .login-container{
    .iconfont{
    font-size:37px;
    }
    .send-btn{
      display: block;
      background-color:  #ededed;
      width: 160px;
      height: 48px;
      line-height: 48px;
      font-size: 22px ;
      color: #666;
      border-radius: 24px;
      text-align: center;
    }
    .login-btn-warp{
      padding: 53px 33px;
      .login-btn{
        background-color: #6db4fb;
        border: 0;
      }
    }

}

</style>